.main {
  width: 100%;
  height: 120%;
  position: relative;

  .bg {
    width: 100%;
    height: 700px;
    // position: absolute;
    // top: 0;
    // left: 0;
    // background-color: red;

    .bg1,
    .bg2 {
      position: absolute;
      width: 200px;
      height: 200px;
      opacity: 0.3;
    }

    .bg1 {
      right: 10%;
      top: 30%;
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
      animation: frame1 13s linear infinite alternate;
    }

    .bg2 {
      right: 5%;
      top: 10%;
      border-radius: 70% 30% 27% 73% / 61% 47% 53% 39%;
      background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      animation: frame2 20s linear infinite alternate;
    }

    .bg3,
    .bg4 {
      position: absolute;
      width: 80px;
      height: 3px;
      background-color: red;
      border-radius: 50% 15% 15% 50%;
      transform: rotate(-45deg);
      opacity: 0.3;
    }

    .bg3 {
      top: 20%;
      left: 50%;
      background: linear-gradient(to right, #fff, rgb(142, 45, 226), rgb(74, 0, 224));
      animation: frame3 10s linear infinite alternate;
    }

    .bg4 {
      top: 30%;
      left: 30%;
      background: linear-gradient(to right, #fff, rgb(6, 121, 119), rgb(2, 255, 234));
      animation: frame4 15s linear infinite alternate;
    }

    .bg5,
    .bg6 {
      position: absolute;
      width: 30px;
      height: 2px;
      opacity: 0.3;
    }

    .bg5::after,
    .bg6::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 2px;
      transform-origin: 15px 1px;
    }

    .bg5::before,
    .bg6::before {
      content: "";
      position: absolute;
      width: 30px;
      height: 2px;
    }

    .bg5 {
      top: 0;
      left: 0;
      background: linear-gradient(to right, rgb(69, 104, 220), rgb(176, 106, 179));
      animation: frame5 15s linear infinite alternate;

      &::after {
        top: -12px;
        left: 7px;
        transform: rotate(60deg);
        background: linear-gradient(to right, rgb(69, 104, 220), rgb(176, 106, 179));
      }

      &::before {
        top: -12px;
        left: -7px;
        transform: rotate(-60deg);
        background-color: #000;
        background: linear-gradient(to right, rgb(69, 104, 220), rgb(176, 106, 179));
      }
    }

    .bg6 {
      top: 0;
      left: 0;
      background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));
      animation: frame6 15s linear infinite alternate;

      &::after {
        top: -12px;
        left: 7px;
        transform: rotate(60deg);
        background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));
      }

      &::before {
        top: -12px;
        left: -7px;
        transform: rotate(-60deg);
        background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));
      }
    }

    .bg7,
    .bg8 {
      position: relative;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      opacity: 0.3;
    }

    .bg7 {
      animation: frame7 15s linear infinite alternate;
      background-image: linear-gradient(to right, #ec77ab 0%, #7873f5 100%);
    }

    .bg8 {
      background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
      animation: frame8 15s linear infinite alternate;
    }

    .bg7::after,
    .bg8::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-color: #f9f9f9;
    }
  }

  .content {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 900px;
    height: 500px;
    // background-color: red;
    display: flex;
    align-items: center;

    .left {
      margin-right: 30px;
      width: 400px;
      height: 400px;
      border-radius: 10px;
      box-shadow: 0 20px 20px #0000003d;
      position: relative;

      .shoucang {
        position: absolute;
        z-index: 99;
        bottom: 20px;
        left: 50%;
        font-size: 30px;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 45px;
        border-radius: 50%;
        background-color: #f9f9f972;
        transform: translateX(-50%);

        .iconfont {
          font-size: 30px;
        }

        .icon-shoucang2 {
          font-size: 60px;
        }

      }

      .iconBox {
        width: 100%;
        height: 100%;
        background-color: #00000025;

        position: relative;
        border-radius: 10px;
        overflow: hidden;

        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100px;
          height: 100px;
        }

        .bottomIcon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 70%;
          height: 70%;
          border-radius: 5px;
          // background-color: pink;
          filter: blur(10px);
          animation: imgRotate 20s linear infinite;
        }
      }

    }

    .right {
      padding: 40px 20px;
      width: 400px;
      height: 350px;
      // background-color: #fff;
      display: flex;
      flex-direction: column;


      h2,
      p,
      span {
        margin-bottom: 20px;
      }

      div {
        width: 150px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background-color: #f9f9f9;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 2px 3px 4px #0000000c;
        transition: all 0.3s ease-in-out;

        &:hover {
          background-color:#b895a7;
          color: #fff;
        }

        .icon-shouqixiangyou14 {
          transition: all 0.3s ease;
        }

        &:hover .icon-shouqixiangyou14 {
          transform: translateX(100px);

        }
      }
    }

  }

  .hot {
    position: absolute;
    left: 70%;
    top: 51vh;
    //  background-color:red;
  }

  .relatedLink {
    position: absolute;
    bottom: 15%;
    left: 5%;
    width: 60%;
    height: 30%;
    // background-color: rgb(51, 255, 0);
    display: flex;
    flex-direction: column;

    .headText {
      width: 100%;
      height: 50px;
      // background-color: pink;
      display: flex;
      align-items: center;
      color: #555555;

      .icon-biaoqian {
        margin: 0 15px;
        font-size: 25px;
        transform: rotate(135deg);
      }

    }

    .labels {
      width: 100%;
      height: 80%;
      // background-color: saddlebrown;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;

      li {
        width: 30%;
        height: 65px;
        border-radius: 5px;
        box-shadow: 2px 3px 4px #00000012;
        background-color: #fff;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        cursor: pointer;
        &:hover  {
          transform: translateY(-20%);
          box-shadow: 1px 3px 5px #00000018;
        }
        &:hover  span{
          color: #b895a7;
        }
        img {
          margin: 0 10px;
          width: 50px;
          height: 50px;
          border-radius: 2px;
        }

        .items {
          width: 60%;
          height: 100%;
          display: flex;
          flex-direction: column;

          span {
            margin: 5px 0;
            font-size: 18px;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          p {
            display: block;
            width: 100%;
            height: 40%;
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            // background-color: tan;
          }
        }
      }

     
    }
  }
}

@keyframes imgRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes frame1 {
  0% {
    transform: translate(-20%, 17%) rotate(-20deg);
  }

  25% {
    transform: translate(10%, -35%) rotate(-10deg);
  }

  50% {
    transform: translate(50%, 60%) rotate(60deg);
  }

  75% {
    transform: translate(20%, 35%) rotate(-10deg);
  }

  100% {
    transform: translate(-10%, 10%) rotate(-20deg);
  }
}

@keyframes frame2 {

  0% {
    transform: translate(10%, -20%) rotate(-20deg);
  }

  25% {
    transform: translate(-20%, -10%) rotate(0deg);
  }

  50% {
    transform: translate(30%, 40%) rotate(60deg);
  }

  75% {
    transform: translate(40%, 35%) rotate(-10deg);
  }

  100% {
    transform: translate(-10%, 10%) rotate(-20deg);
  }
}

@keyframes frame3 {
  0% {
    transform: translate(-3vw, 10vh) rotate(-30deg);
  }

  25% {
    transform: translate(-5vw, 25vh) rotate(-45deg);
  }

  50% {
    transform: translate(5vw, 30vh) rotate(-50deg);
  }

  75% {
    transform: translate(-5vw, 25vh) rotate(-45deg);
  }

  100% {
    transform: translate(-3vw, 10vh) rotate(-30deg);
  }
}

@keyframes frame4 {
  0% {
    transform: translate(100%, 23vh) rotate(-25deg);
  }

  15% {
    transform: translate(200%, 23vh) rotate(-30deg);
  }

  30% {
    transform: translate(250%, 40vh) rotate(-35deg);
  }

  45% {
    transform: translate(330%, 50vh) rotate(-40deg);
  }

  60% {
    transform: translate(250%, 40vh) rotate(-35deg);
  }

  75% {
    transform: translate(200%, 23vh) rotate(-30deg);
  }

  90% {
    transform: translate(100%, 23vh) rotate(-25deg);
  }

  100% {
    transform: translate(46%, 35vh) rotate(-30deg);
  }
}

@keyframes frame5 {
  0% {
    transform: translate(40vw, 5vh) rotate(20deg);
  }

  25% {
    transform: translate(50vw, 10vh) rotate(50deg);
  }

  50% {
    transform: translate(55vw, 15vh) rotate(90deg);
  }

  75% {
    transform: translate(50vw, 10vh) rotate(50deg);
  }

  100% {
    transform: translate(40vw, 5vh) rotate(20deg);
  }
}

@keyframes frame6 {
  0% {
    transform: translate(30vw, 20vh) rotate(20deg);
  }

  25% {
    transform: translate(40vw, 35vh) rotate(60deg);
  }

  50% {
    transform: translate(55vw, 46vh) rotate(180deg);
  }

  75% {
    transform: translate(40vw, 35vh) rotate(60deg);
  }

  100% {
    transform: translate(20vw, 20vh) rotate(20deg);
  }
}

@keyframes frame7 {
  0% {
    transform: translate(50vw, 80vh) rotate(9deg);
  }

  50% {
    transform: translate(30vw, 30vh) rotate(9deg);
  }

  100% {
    transform: translate(61vw, 29vh) rotate(18deg);
  }
}

@keyframes frame8 {
  0% {
    transform: translate(5vw, 10vh) rotate(9deg);
  }

  60% {
    transform: translate(10vw, 25vh) rotate(9deg);
  }

  80% {
    transform: translate(15vw, 30vh) rotate(9deg);
  }

  100% {
    transform: translate(5vw, 10vh) rotate(18deg);
  }
}
